<template>
  <div>
    <el-card class="card">
      <el-descriptions
          title="个人信息"
          direction="vertical"
          :column="4"
          size="large"
          :span="2"
          border
      >
        <el-descriptions-item label="姓名" :span="2">{{teacherInfoItem?.name}}</el-descriptions-item>
        <el-descriptions-item label="所属学院" :span="2">{{teacherInfoItem?.academy}}</el-descriptions-item>
        <el-descriptions-item label="邮箱" :span="4">{{teacherInfoItem?.email}}</el-descriptions-item>
        <el-descriptions-item label="联系电话" :span="4">{{teacherInfoItem?.phone}}</el-descriptions-item>

      </el-descriptions>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import { onMounted, ref } from 'vue'
import {getTeacherInfo} from "@/api/teacher";
import {TeacherItem} from "@/api/teacher/type";
const router = useRouter()

const teacherInfoItem = ref<TeacherItem>()
onMounted(async () => {
  await teacherInfo()
})

const teacherInfo = async () => {
  try{
    const { data } = await getTeacherInfo()
    teacherInfoItem.value = data
  } catch (error) {
    await Promise.reject(error)
  }
}
</script>


<style scoped>
.card {
  margin: 5% auto 0;
  width:60%;
  /*height:70vh;*/
  opacity: 0.9;
  /*min-height: 600px;*/
}
</style>
